<template>
  <div id="poster">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="0px"
      class="register-container"
      label-position="left"
    >
      <h3 class="register_title">
        系统注册
        <el-button @click="toLogin" class="">登录</el-button>
      </h3>
      <el-form-item label="" prop="loginName">
        <el-input
          type="text"
          clearable
          prefix-icon="el-icon-user"
          :rules="rules.loginName"
          v-model="ruleForm.loginName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          clearable
          show-password
          prefix-icon="el-icon-lock"
          autocomplete="off"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          clearable
          show-password
          prefix-icon="el-icon-lock"
          autocomplete="off"
          placeholder="请确认密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="ruleForm.role">
          <el-radio :label="3">用户</el-radio>
          <el-radio :label="2">商家</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" style="background: #505458;border: none;width:100%;">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'RegisterForm',
  data() {
    const validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'));
      }
      if (this.ruleForm.checkPass) {
        this.$refs.ruleForm.validateField('checkPass');
      }
      callback();
    };

    const validatePass2 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请再次输入密码'));
      }
      if (value !== this.ruleForm.password) {
        return callback(new Error('两次输入密码不一致!'));
      }
      callback();
    };

    return {
      ruleForm: {
        loginName: '',
        password: '',
        checkPass: '',
        role: 3,
      },
      rules: {
        loginName: [
          { required: true, message: '请输入您的账号', trigger: 'blur' },
          { min: 2, max: 9, message: '长度为2到9个字符', trigger: 'blur' },
        ],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
      },
    };
  },
  methods: {
  submitForm() {
    this.$refs.ruleForm.validate((valid) => {
      if (valid) {
        const postData = {
          loginName: this.ruleForm.loginName,
          password: this.ruleForm.password,
          role: this.ruleForm.role,
        };
        axios.post('http://localhost:8080/api/register', postData)
          .then((response) => {
            const responseData = response.data;
            console.log(response);
            if (responseData) {
              this.ruleForm = {};
              this.$message({
                message: '注册成功，点击“去登录”',
                type: 'success',
                onClose: this.toLogin,
              });
            } else {
              this.$message.error(responseData.message);
            }
          })
          .catch((error) => {
            console.error(error);
            this.$message.error('注册失败，请重试');
          });
      } else {
        console.log('表单校验失败');
      }
    });
  },
  toLogin() {
    this.$router.push({ path: '/' });
    console.log("跳转");
  },
},
};

</script>

<style scoped>
#poster {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  margin: 0px;
  padding: 0px;
}

.register-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.register_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.re {
  background-color: aqua;
}
</style>
